<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
//20-11-..夜 博客摘录 
//bfc定义 (box formatting context) 
    /*译为块级格式化作用域 它是一个独立的渲染区域*/
    /*只有Block-levelbox参与 它规定内部的Block-levelBox如何布局 并且与这个区域外部毫不相干*/



//css布局的基本单位 
    /*box是css布局的 对象和基本单位 
      直观点说 就是一个页面由多个box组成 元素的类型 和 display属性 (一个决定如何渲染文档的容器)
    */


    /*formatting coontext 
      人家w3c css2.1规范中的一个概念    
      他是页面中的一块渲染区域 并且由一套渲染规则 决定了子元素如何定位  以及和其他元素的关系和相互作用
      最常见的Formatting context有？
      Block fomatting context  (简称BFC)
      Lnline formatting context(简称IFC)        
    */


    /*
      BFC 一个独立的布局环境 其中的元素布局是不受外界影响的 
      并且在一个BFC中 块盒 和 行盒(行盒 由一行中所有的内联元素所组成)
      都会垂直的沿着其父元素的边框排列 
    */

//BFC的布局规则 
    /*
     1 .内部的Box会在垂直方向 一个接一个的放置 (即 一列的)
     2 .Box垂直方向的距离由margin决定 属于同一个BFC的两个相邻的Box的margin会发生重叠 
     3 .计算BFC的高度时 浮动元素 也参与计算 
     4 .BFC可以看成页面上的隔离的独立容器 容器里面的子元素不影响外面的元素 反之也是如此 
     5 .BFC区域不会与 float box重叠 
     6 .每个盒子(块盒 和 行盒)的margin box的左边 与包含块border box的左边相接触 ....   
    */

//如何创建BFC？ (即布局的时候是怎么触发BFC的)？
    /*
     1 .float的值不是none 
     2 .position的值不是static跟relative
     3 .display的值是inline-block table-cell flex table-caption inline-felx 
     4 .overflow的值不是visible  
     就会形成的
    */    


//bfc的作用
      // 阻止margin重叠
      // 可以包含浮动的元素（清除浮动）
      // 可以阻止元素被浮动元素覆盖

//看图片上面的demo了 
//最后 就是说布局 再套个div而已了  









</script>